import React, { Component } from 'react'
import { Select, Input, Space } from 'antd'
const { Option } = Select
const { TextArea } = Input
export default class MyInput extends Component{
  selectBefore = (
    <Select defaultValue="http://" style={{ width: 120 }}>
      <Option value="http://">http://</Option>
      <Option value="https://">https://</Option>
    </Select>
  )
  selectAfter = (
    <Select defaultValue=".com" style={{ width: 120 }}>
      <Option value=".com">.com</Option>
      <Option value=".cn">.cn</Option>
    </Select>
  )
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Space direction="vertical">
                <Input addonBefore="http://" addonAfter=".com" />
                <Input addonBefore={this.selectBefore} addonAfter={this.selectAfter} />
                <TextArea rows={5} />
              </Space>
            </div>
          </div>
        </div>
      </>
    )
  }
}